<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="订单编号">
              <a-input placeholder="请输入订单编号" v-model="queryParam.orderNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="文件类型">
              <a-select v-model="queryParam.fileType" placeholder="请选择文件类型" allowClear>
                <a-select-option value="summary">汇总单</a-select-option>
                <a-select-option value="optimization">优化单</a-select-option>
                <a-select-option value="both">汇总单+优化单</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="上传人">
              <j-select-employee-modal
                v-model="queryParam.uploadPerson"
                :departName="'设计部'"
                :multiple="false"
                @change="handleUploadPersonChange"
              ></j-select-employee-modal>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="上传日期">
              <a-range-picker
                v-model="queryParam.uploadDate"
                :placeholder="['开始日期', '结束日期']"
                format="YYYY-MM-DD"
                @change="handleUploadDateChange"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset" icon="reload">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading">
        
        <!-- 订单状态 -->
        <span slot="fileTypeSlot" slot-scope="text, record">
          <a-tag v-if="record.summaryFilePath && record.optimizationFilePath" color="green">汇总单+优化单</a-tag>
          <a-tag v-else-if="record.summaryFilePath" color="cyan">汇总单</a-tag>
          <a-tag v-else-if="record.optimizationFilePath" color="blue">优化单</a-tag>
          <a-tag v-else>未知</a-tag>
        </span>
        
        <span slot="summaryFileSlot" slot-scope="text, record">
          <template v-if="record.summaryFilePath">
            <span>
              <a @click="handleDownloadFile(record.summaryFilePath, record.summaryFileName)">{{ record.summaryFileName }}</a>
            </span>
            <div>
              <span class="file-upload-info">
                上传人: {{ record.uploadSummaryPersonName || '-' }} | 
                上传时间: {{ record.uploadSummaryTime || '-' }}
              </span>
            </div>
          </template>
          <template v-else>
            <a-tag color="red">未上传</a-tag>
          </template>
        </span>
        
        <span slot="optimizationFileSlot" slot-scope="text, record">
          <template v-if="record.optimizationFilePath">
            <span>
              <a @click="handleDownloadFile(record.optimizationFilePath, record.optimizationFileName)">{{ record.optimizationFileName }}</a>
            </span>
            <div>
              <span class="file-upload-info">
                上传人: {{ record.uploadOptimizationPersonName || '-' }} | 
                上传时间: {{ record.uploadOptimizationTime || '-' }}
              </span>
            </div>
          </template>
          <template v-else>
            <a-tag color="red">未上传</a-tag>
          </template>
        </span>
        
        <!-- 操作按钮区域 -->
        <span slot="action" slot-scope="text, record">
          <a @click="handleOrderDetail(record)">查看订单</a>
        </span>
      </a-table>
    </div>

    <!-- 订单详情弹窗 -->
    <design-order-detail ref="detailModal"></design-order-detail>
  </a-card>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { getAction, downloadFile } from '@/api/manage'
import DesignOrderDetail from './modules/DesignOrderDetail'
import JSelectEmployeeModal from '@/components/jeecgbiz/JSelectEmployeeModal'

export default {
  name: 'DesignRecentFiles',
  mixins: [mixinDevice],
  components: {
    DesignOrderDetail,
    JSelectEmployeeModal
  },
  data() {
    return {
      description: '设计管理-最近设计文件',
      // 查询参数
      queryParam: {
        orderNo: '',
        fileType: '',
        uploadPerson: '',
        uploadPersonName: '',
        uploadDate: null,
        beginDate: '',
        endDate: ''
      },
      // 表格列配置
      columns: [
        {
          title: '订单编号',
          align: 'center',
          dataIndex: 'orderNo',
          width: 120
        },
        {
          title: '文件类型',
          align: 'center',
          width: 120,
          scopedSlots: { customRender: 'fileTypeSlot' }
        },
        {
          title: '汇总单',
          align: 'center',
          scopedSlots: { customRender: 'summaryFileSlot' }
        },
        {
          title: '优化单',
          align: 'center',
          scopedSlots: { customRender: 'optimizationFileSlot' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 120,
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载状态
      loading: false,
      // 数据源
      dataSource: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      this.loading = true
      
      // 构建查询参数
      const params = {
        limit: 20,
        orderNo: this.queryParam.orderNo,
        fileType: this.queryParam.fileType,
        uploadPerson: this.queryParam.uploadPerson,
        beginDate: this.queryParam.beginDate,
        endDate: this.queryParam.endDate
      }
      
      getAction('/oms/designFile/getRecentFiles', params).then(res => {
        if (res.success) {
          this.dataSource = res.result || []
        } else {
          this.$message.warning(res.message)
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    
    // 处理文件下载
    handleDownloadFile(filePath, fileName) {
      if (!filePath) {
        this.$message.warning('文件路径不存在')
        return
      }
      
      const url = '/sys/common/download'
      const params = {
        filePath: filePath,
        fileName: fileName
      }
      
      // 使用downloadFile方法，它会自动处理token和响应类型
      downloadFile(url, fileName, params)
    },
    
    // 查询按钮
    searchQuery() {
      this.loadData()
    },
    
    // 重置按钮
    searchReset() {
      this.queryParam = {
        orderNo: '',
        fileType: '',
        uploadPerson: '',
        uploadPersonName: '',
        uploadDate: null,
        beginDate: '',
        endDate: ''
      }
      this.loadData()
    },
    
    // 处理上传人选择变化
    handleUploadPersonChange(value, selectedEmployees) {
      if (selectedEmployees && selectedEmployees.length > 0) {
        this.queryParam.uploadPersonName = selectedEmployees[0].empName
      } else {
        this.queryParam.uploadPersonName = ''
      }
    },
    
    // 处理上传日期变化
    handleUploadDateChange(dates, dateStrings) {
      if (dates) {
        this.queryParam.beginDate = dateStrings[0]
        this.queryParam.endDate = dateStrings[1]
      } else {
        this.queryParam.beginDate = ''
        this.queryParam.endDate = ''
      }
    },
    
    // 查看订单详情
    handleOrderDetail(record) {
      this.$refs.detailModal.show(record.orderId)
    }
  }
}
</script>

<style scoped>
.file-upload-info {
  font-size: 12px;
  color: #999;
}
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}
</style> 